import React, { Component } from 'react'
import PropTypes from "prop-types"
import "./index.css"

export default class Footer extends Component {

  static propTypes = {
    list: PropTypes.array.isRequired,
    changeAllChecked: PropTypes.func.isRequired,
    removeAll: PropTypes.func.isRequired
  }

  handleChange = (state) => {
    return () => {
      this.props.changeAllChecked(!state);
    }
  }

  handleRemove = () => {
    this.props.removeAll();
  }

  render() {
    let {list} = this.props;
    let total = list.length;
    let count = list.reduce((prev, current) => {
      return prev + (current.checked ? 1 : 0)
    }, 0)

    return (
      <div className="todo-footer">
        <input type="checkbox" checked={count === total && total !== 0} onChange={this.handleChange(count === total)} />
        <div className="text">选中任务{count}/全部任务{total}</div>
        <button className="btn" onClick={this.handleRemove}>清除已完成任务</button>
      </div>
    )
  }
}
